
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebSocket Example</title>
  <script src="https://cdn.socket.io/4.0.1/socket.io.min.js"></script>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script src="JSSDK.js"></script>
  <script> 
    function btnAction() {

      wx.miniProgram.navigateTo({ url: "/pages/home/home" });
    }
 </script>
  <style>
    .login{
      width:30%;
      height:30vh
    }
    .image-container {
      width: 50%;
      height:20vh;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      max-width: 600px;
      border: 2px solid #000;
  }

  .image-container img {
      width: 50px;
      height: 50px;
      object-fit: cover;
      cursor: pointer;
      border: 1px solid transparent;
      transition: border-color 0.3s ease-in-out;
      margin:5px;
  }

  .image-container img:hover {
      border-color: #3498db; /* 鼠标悬停时边框颜色 */
  }
  </style>
</head>
<body>
  <div οnclick="btnAction">返回</div>
  <div class="login">
    <span>输入用户名</span>
    <input type="text" placeholder="请输入用户名" id="username"/>    
    <button id="login_button">提交</button>
  </div>
  <div>
    <h2>答题页面窗口</h2>
    <button id="create_room">+</button>
    <button id="send_match">加入房间</button>
  </div>
  <h2>答题框</h2>
  <div id="topic_card"></div>
  <h2>计分板</h2>
  <div id="score"></div>
  <div>
    <h2>大厅聊天窗口</h2>
    <div id="chat"><h3>聊天框</h3></div>
    <input type="text" placeholder="随便聊点什么" id="chating"/>
    <button id="send_chat">发送</button>
  </div>
  <div class="state">大厅状态</div>
  <div class="onlineNum">大厅人数</div>
  <script>
    const socket = io('http://localhost:3000');
    let username;
    //正确选项
    let right_key;

    $("#login_button").on('click',function(){
      //获取用户名
      username = $('#username').val();
      if(!username){
        alert('请输入用户名')
        return;
      }
      socket.emit('login',{
        username:username
      })
      socket.on('logerror',data=>{
        alert(data.msg)
      })
      socket.on('logsuccess',data=>{
        alert(data.msg);
      })
      socket.on('addUser',data=>{
        $('.state').append(`<p>用户${data.username}登入联机大厅</p>`)
      })
      socket.on('onlineNum',data=>{
        $('.onlineNum').text('');
        $('.onlineNum').append(`<p>当前大厅人数:${data.num}</p>`)
      })
      socket.on('exitUser',data=>{
        $('.state').append(`<p>用户${data.username}已退出联机大厅</p>`)
      })

      
    })

    $('#send_chat').on('click',function(){
      //const mssg = 
      socket.emit('chat message',{
        msg:$('#chating').val(),//信息
        send:username,//发件人
        time:new Date().toLocaleTimeString(),//当前本地时间
        to:'all',
        type:'text'
      })
    })

    socket.on('chat message',data=>{
      if(data.send===username){
        $('#chat').append(`<p>${data.time}----${data.msg}:${data.send}</p>`)
      }else{
        $('#chat').append(`<p>${data.send}:${data.msg}----${data.time}</p>`)
      }
      
    })

    $('#create_room').on('click',function(){
      socket.emit('compaign',{
        username:username,
      })
      //监听客户端创建房间成功请求
      socket.on('add_room',data=>{
        alert(data.msg)
      })
      $('#create_room').fadeOut();
      $('#send_match').fadeOut();
      
    })

    $('#send_match').on('click',function(){
      socket.emit('enter_room',{
        username:username,
      })

    })

    socket.on('vs_people',data=>{
      if(data.send_to===username){
        right_key = data.topic.right_key;
        alert(`已加入房间,对手是${data.vs_people}`);
        $('#topic_card').append(`<p>${data.topic.attribute}</p>`);
        $('#topic_card').append(`<p>请选出正确答案</p>`)
        $('#topic_card').append(`<p>${data.topic.subject}</p>`);
        data.topic.right_key==='A'?
          $('#topic_card').append(`<button class='sub' id='right' onclick="getValue('A')">正确答案A:${data.topic.optionA}</button>`)
        :$('#topic_card').append(`<button class='sub'onclick="getValue('A')">A:${data.topic.optionA}</button>`);
        data.topic.right_key==='B'?
          $('#topic_card').append(`<button class='sub' id='right' onclick="getValue('B')">正确答案B:${data.topic.optionA}</button>`)
        :$('#topic_card').append(`<button class='sub' onclick="getValue('B')")>B:${data.topic.optionB}</button>`)
        data.topic.right_key==='C'?
          $('#topic_card').append(`<button class='sub' id='right' onclick="getValue('C')">正确答案C:${data.topic.optionA}</button>`)
        :$('#topic_card').append(`<button class='sub' onclick="getValue('C')">C:${data.topic.optionC}</button>`)
        data.topic.right_key==='D'?
          $('#topic_card').append(`<button class='sub' id='right' onclick="getValue('D')">正确答案D:${data.topic.optionA}</button>`)
        :$('#topic_card').append(`<button class='sub' onclick="getValue('D')">D:${data.topic.optionD}</button>`)

        

      }else{
        return
      }
    })
    socket.on('vs_start',data=>{
      if(data.send_to===username){
        right_key = data.topic.right_key;
        alert(`对手${data.vs_people}已进入房间,`);
        $('#topic_card').append(`<p>${data.topic.attribute}</p>`);
        $('#topic_card').append(`<p>请选出正确答案</p>`)
        $('#topic_card').append(`<p>${data.topic.subject}</p>`);
        data.topic.right_key==='A'?
          $('#topic_card').append(`<button class='sub' id='right' onclick="getValue('Ah')">正确答案A:${data.topic.optionA}</button>`)
        :$('#topic_card').append(`<button class='sub'onclick="getValue('Ah')">A:${data.topic.optionA}</button>`);
        data.topic.right_key==='B'?
          $('#topic_card').append(`<button class='sub' id='right' onclick="getValue('Bh')">正确答案B:${data.topic.optionA}</button>`)
        :$('#topic_card').append(`<button class='sub' onclick="getValue('Bh')")>B:${data.topic.optionB}</button>`)
        data.topic.right_key==='C'?
          $('#topic_card').append(`<button class='sub' id='right' onclick="getValue('Ch')">正确答案C:${data.topic.optionA}</button>`)
        :$('#topic_card').append(`<button class='sub' onclick="getValue('Ch')">C:${data.topic.optionC}</button>`)
        data.topic.right_key==='D'?
          $('#topic_card').append(`<button class='sub' id='right' onclick="getValue('Dh')">正确答案D:${data.topic.optionA}</button>`)
        :$('#topic_card').append(`<button class='sub' onclick="getValue('Dh')">D:${data.topic.optionD}</button>`)

      }else{
        return
      }
    })

    function getValue(value){
      let add_score = 0
      if(value===right_key){
        add_score = 10;
      }else{
        add_score = 0
      }

      socket.emit('select',{
        username:username,
        select:value,
        add_score:add_score
      })
    }
    //用户层面监听服务器发回的答案信息
    socket.on('answer',data=>{
      if(data.send_toh==username){
        $("#score").append(`<p>我的得分是${data.score_h},对方得分是${data.score_g}</p>`)
      }else if(data.send_tog==username){
        $("#score").append(`<p>我的得分是${data.score_g},对方得分是${data.score_h}</p>`)
      }
    })

    //用户层面接收题目
    socket.on('next_topic',(data)=>{
      console.log(data);
      if(data.send_toh==username){
        $('#topic_card').text('')
        right_key = data.topic.right_key;
        $('#topic_card').append(`<p>${data.topic.attribute}</p>`);
        $('#topic_card').append(`<p>请选出正确答案</p>`)
        $('#topic_card').append(`<p>${data.topic.subject}</p>`);
        data.topic.right_key==='A'?
          $('#topic_card').append(`<button class='sub' id='right' onclick="getValue('Ah')">正确答案A:${data.topic.optionA}</button>`)
        :$('#topic_card').append(`<button class='sub'onclick="getValue('Ah')">A:${data.topic.optionA}</button>`);
        data.topic.right_key==='B'?
          $('#topic_card').append(`<button class='sub' id='right' onclick="getValue('Bh')">正确答案B:${data.topic.optionA}</button>`)
        :$('#topic_card').append(`<button class='sub' onclick="getValue('Bh')")>B:${data.topic.optionB}</button>`)
        data.topic.right_key==='C'?
          $('#topic_card').append(`<button class='sub' id='right' onclick="getValue('Ch')">正确答案C:${data.topic.optionA}</button>`)
        :$('#topic_card').append(`<button class='sub' onclick="getValue('Ch')">C:${data.topic.optionC}</button>`)
        data.topic.right_key==='D'?
          $('#topic_card').append(`<button class='sub' id='right' onclick="getValue('Dh')">正确答案D:${data.topic.optionA}</button>`)
        :$('#topic_card').append(`<button class='sub' onclick="getValue('Dh')">D:${data.topic.optionD}</button>`)
        
      }else if(data.send_tog==username){
        $('#topic_card').text('')
        $('#topic_card').append(`<p>${data.topic.attribute}</p>`);
        $('#topic_card').append(`<p>请选出正确答案</p>`)
        $('#topic_card').append(`<p>${data.topic.subject}</p>`);
        data.topic.right_key==='A'?
          $('#topic_card').append(`<button class='sub' id='right' onclick="getValue('A')">正确答案A:${data.topic.optionA}</button>`)
        :$('#topic_card').append(`<button class='sub'onclick="getValue('A')">A:${data.topic.optionA}</button>`);
        data.topic.right_key==='B'?
          $('#topic_card').append(`<button class='sub' id='right' onclick="getValue('B')">正确答案B:${data.topic.optionA}</button>`)
        :$('#topic_card').append(`<button class='sub' onclick="getValue('B')")>B:${data.topic.optionB}</button>`)
        data.topic.right_key==='C'?
          $('#topic_card').append(`<button class='sub' id='right' onclick="getValue('C')">正确答案C:${data.topic.optionA}</button>`)
        :$('#topic_card').append(`<button class='sub' onclick="getValue('C')">C:${data.topic.optionC}</button>`)
        data.topic.right_key==='D'?
          $('#topic_card').append(`<button class='sub' id='right' onclick="getValue('D')">正确答案D:${data.topic.optionA}</button>`)
        :$('#topic_card').append(`<button class='sub' onclick="getValue('D')">D:${data.topic.optionD}</button>`)
      }else{
        return
      }
    })
    
    

    

    
  </script>
</body>
</html>